<!--
 * @Descripttion: 描述
 * @Author: 刘黎
 * @Date: 2024-06-27 19:40:48
 * @LastEditors: 刘黎
 * @LastEditTime: 2024-08-17 00:13:19
-->
<!-- 新增好友 -->
<template>
  <div class="apption">
    <!-- 标题 -->
    <div class="pageTitle">经销商管理</div>
    <div class="topBox">
      <div class="topBut" @click="setupFun()"><el-icon><Setting /></el-icon> 设置经销商升级机制</div>
      <el-tabs v-model="prop.level" class="demo-tabs" @tab-click="init()">
        <el-tab-pane label="全部" name=""></el-tab-pane>
        <el-tab-pane label="分公司" name="1"></el-tab-pane>
        <el-tab-pane label="大批发" name="2"></el-tab-pane>
        <el-tab-pane label="中批发" name="3"></el-tab-pane>
        <el-tab-pane label="小批发" name="4"></el-tab-pane>
      </el-tabs>
      <div class="searchTop">
        <div class="left">
          <el-form :inline="true" :model="prop" class="demo-form-inline" label-width="100px">
            <el-form-item label="经销商:">
              <el-input v-model="prop.name" placeholder="请输入经销商名称" />
            </el-form-item>
            <el-form-item label="联系电话:">
              <el-input v-model="prop.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <el-button type="primary" @click="init">查询</el-button>
          <el-button type="success" @click="resetClick">重置</el-button>
          <!-- <el-button type="primary" @click="addClick">新增</el-button> -->
        </div>
      </div>
    </div>
    <div class="tableClass">
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="name" label="经销商" />
        <el-table-column label="经销商等级">
          <template #default="scope">
            <template v-if="scope.row.level===0">无等级</template>
            <template v-if="scope.row.level===1">分公司</template>
            <template v-if="scope.row.level===2">大批发</template>
            <template v-if="scope.row.level===3">中批发</template>
            <template v-if="scope.row.level===4">小批发</template>
            <template v-if="scope.row.level===5">团长</template>
          </template>
        </el-table-column>
        <el-table-column label="上级经销商">
          <template #default="scope">
            {{ scope.row.p_name }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="经销商账号" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="total_sales" label="总销量" />
        <el-table-column prop="agent_num" label="下级代理人数" />
        <!-- <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="danger" size="small" @click="deleteClick(scope.row)">删除</el-button>
            <el-button type="primary" size="small" @click="editClick(scope.row)">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="timedPagination">
      <el-pagination
        v-model:current-page="prop.page"
        v-model:page-size="prop.limit"
        :total="prop.total"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- 新增or编辑分类 -->
    <el-dialog
      v-model="dialogVisible"
      width="1200"
      :before-close="dialogClose"
      title="设置经销商升级机制"
      top="10vh"
    >
      <div class="dialogContent">
        <el-tabs v-model="formProp.type" class="demo-tabs" @tab-click="setUpInit">
          <el-tab-pane label="团长升级条件设置" name="1"></el-tab-pane>
          <el-tab-pane label="小批发升级条件设置" name="2"></el-tab-pane>
          <el-tab-pane label="中批发升级条件设置" name="3"></el-tab-pane>
          <el-tab-pane label="大批发升级条件设置" name="4"></el-tab-pane>
          <el-tab-pane label="分公司升级条件设置" name="5"></el-tab-pane>
        </el-tabs>
        <el-form :inline="true" :model="formProp" class="demo-form-inline" label-width="100px">
          <el-form-item label="销售量:">
            <el-input v-model="formProp.sales" placeholder="输入升级所需的销售单量" />
          </el-form-item>
          <el-form-item label="销售金额:">
            <el-input v-model="formProp.price" placeholder="输入升级所需的销售金额" />
          </el-form-item>
          <el-form-item v-if="formProp.type==2 || formProp.type==3 || formProp.type==4"  label="发展统计:">
            <el-input v-model="formProp.same_level_num" placeholder="输入发展统计人数" />
          </el-form-item>
          <template v-if="formProp.type==1 || formProp.type==5">
            <el-form-item label="代理发展:">
              <el-input v-model="formProp.agent_1" placeholder="输入直接授权平级团队数" />
            </el-form-item>
            <el-form-item label="二级发展:">
              <el-input v-model="formProp.agent_2" placeholder="输入间接授权平级团队数" />
            </el-form-item>
            <el-form-item label="总代理人数:">
              <el-input v-model="formProp.all_agent" placeholder="请输入总授权平团人数" />
            </el-form-item>
            <el-form-item label="代理销量:">
              <el-input v-model="formProp.agent_sales" placeholder="请输入授权团队销量" />
            </el-form-item>
            <el-form-item label="发展激励:">
              <el-input v-model="formProp.bonus_ratio" placeholder="请输入销售额计划比例" />
              <div class="msg">*平级代理提前晋升等级后，给予发展者发展激励（计算特定比例的销售额给到发展者）代理晋升者销售额不受影响。</div>
            </el-form-item>
          </template>
          <el-form-item v-if="formProp.type=='3' || formProp.type=='4' || formProp.type=='5'" label="准晋升:">
            <el-select v-model="formProp.is_promotion" clearable placeholder="选择是否允许准晋升">
              <el-option
                label="是"
                :value="1"/>
              <el-option
                label="否"
                :value="0"/>
            </el-select>
            <div class="msg">*发展的平级代理提前晋升为上级后，给予发展者发展激励准晋升机制享受其晋升等级后的分润级别价格但不再获取其代理（已经升级的代理）抽佣。</div>
          </el-form-item>
          <template v-if="formProp.type==1 || formProp.type==5">
            <el-form-item label="当月销量:">
              <el-input v-model="formProp.month_sales" placeholder="输入升级所需的当月销量" />
            </el-form-item>
            <el-form-item label="平级抽佣:">
              <el-input v-model="formProp.flat_commission" placeholder="请输入平级抽佣金额" />
            </el-form-item>
            <el-form-item v-if="formProp.type==5" label="公司审核:">
              <el-select v-model="formProp.is_check" clearable placeholder="请选择是否需要公司审核">
                <el-option
                  label="是"
                  :value="1"/>
                <el-option
                  label="否"
                  :value="0"/>
              </el-select>
            </el-form-item>
          </template>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" type="primary" @click="saveFun()">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { computed,ref,onMounted } from 'vue'
import { useChatInfoStore, useJobIDStore } from '@/store/index.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import { postApi } from "@/api/api.js"
import elUploadOptionMultiple from '@/components/elUploadOptionMultiple.vue';
import moment from 'moment'
let prop = ref({
  level: '',
  name: '',
  phone: '',
  page: 1,
  limit: 10,
  total: ''
})
let loading = ref(false)
let tableData = ref([])

// 查询商品
function init() {
  loading.value = true
  let obj = {
    level: prop.value.level,
    name: prop.value.name,
    phone: prop.value.phone,
    page: prop.value.page,
    limit: prop.value.limit
  }
  postApi('/agent.user/index', obj).then(res => {
    loading.value = false
    tableData.value = res.data
    prop.value.total = res.count
  }).catch(err => {
    loading.value = false
  })
}
function resetClick() { // 重置
  prop.value = {
    state: '',
    name: '',
    time: []
  }
  init()
}
function handleCurrentChange(val){
  prop.value.page = val
  init()
}

// 新增商品
let dialogVisible = ref(false)
let formProp = ref({
  id: '',
  type: '1', // 机制类型(1:分公司,2:大批发,3:中批发,4:小批发,5:团长)
  sales: '', // 销售量
  price: '', // 销售金额
  agent_1: '', // 下级代理数量
  agent_2: '', // 二级代理数量
  all_agent: '', // 总代理数量
  agent_sales: '', // 代理销量
  bonus_ratio: '', // 奖金比例 
  flat_commission: '', // 平级佣金金额
  is_promotion: '', // 是否允许准晋升(1:是,0:否) 
  to_month_sales: '', // 上月销量
  month_sales: '', // 当月销量
  same_level_num: '', // 发展统计人数
  is_check: '' // 是否需要审核(1:是,0:否)
})

// 设置
function setupFun(){
  dialogVisible.value = true
  setUpInit()
}
function setUpInit(row) {
  postApi('/agent.config/index', {
    type: row.props.name
  }).then(res => {
    loading.value = false
    formProp.value = {
      id: res.data.id,
      type: row.props.name, // 机制类型(1:分公司,2:大批发,3:中批发,4:小批发,5:团长)
      sales: res.data.sales, // 销售量
      price: res.data.price, // 销售金额
      agent_1: res.data.agent_1, // 下级代理数量
      agent_2: res.data.agent_2, // 二级代理数量
      all_agent: res.data.all_agent, // 总代理数量
      agent_sales: res.data.agent_sales, // 代理销量
      bonus_ratio: res.data.bonus_ratio, // 奖金比例 
      flat_commission: res.data.flat_commission, // 平级佣金金额
      is_promotion: res.data.is_promotion, // 是否允许准晋升(1:是,0:否) 
      to_month_sales: res.data.to_month_sales, // 上月销量
      month_sales: res.data.month_sales, // 当月销量
      same_level_num: res.data.same_level_num,
      is_check: res.data.sales // 是否需要审核(1:是,0:否)
    }
  }).catch(err => {
    loading.value = false
  })
}
// 保存
function saveFun() {
  loading.value = true
  postApi('/agent.config/save', formProp.value).then(res => {
    if(res.code === 1){
      ElMessage({message: "操作成功",type: 'success'})
      init()
      dialogVisible.value = false
    }
  }).catch(err => {
    loading.value = false
  })
}
// 关闭弹框
function dialogClose(params) {
  dialogVisible.value = false
}

onMounted(()=>{
  init()
})
</script>

<style lang="scss" scoped>
.apption{
  padding: 20px;
  height: 100vh;
  .topBox{
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    padding: 20px 20px 10px 20px;
    margin: 20px 0;
    .searchTop{
      display: flex;
      justify-content: space-between;
      .left{
        width: calc(100% - 260px);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      .right{
        width: 260px;
      }
    }
  }
  .topBut{
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 30px;
    z-index: 9;
  }
  .classOption{
    display: flex;
    justify-content: space-between;
    .oneClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .twoClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .threeClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .list{
      cursor: pointer;
      padding: 0 13px;
      margin-bottom: 8px;
      height: 36px;
      background: #F6F6F6;
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-icon{
        margin-left: 4px;
      }
      .deleteIco{
        cursor: pointer;
        margin-right: 4px;
      }
    }
    .active{
      background: #000000;
      border-radius: 4px 4px 4px 4px;
      color: #FFFFFF;
      .el-icon{
        color: #FFFFFF;
      }
      .deleteIco{
        color: #FFFFFF;
      }
    }
    .title{
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 14px;
      color: #BA9763;
      .el-icon{
        width: 36px;
        height: 36px;
        background: #F6F6F6;
        border-radius: 5px 5px 5px 5px;
        color: #666;
        font-size: 16px;
        margin-right: 4px;
      }
    }
    .addBut{
      height: 36px;
      line-height: 36px;
      text-align: center;
      display: block;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #F6F6F6;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
    }
  }
  .pageTitle{
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 16px;
    color: rgb(16, 16, 16);
  }
  .tableClass{
    margin-bottom: 20px;
  }
}
.dialogContent{
  ::v-deep .el-form-item__content{
    width: 190px;
  }
  .msg{
    margin-top: 6px;
    font-size: 10px;
    line-height: 18px;
  }
}
</style>
